<template>
  <div>
    <el-container>
      <!--左侧-->
      <div :id="`${menuCollapse?'aside-menu-collapse':'aside-menu'}`">
        <div class="logoBox" @click="$route.path!=='/'?$router.replace('/'):''">
          <img src="https://lxpstr-1307443497.cos.ap-nanjing.myqcloud.com/Logo.cf7c580b.svg" alt="无奇不邮Logo" title="无奇不邮Logo" width="30" height="30"/>
          {{ menuCollapse ? null : '无奇不邮' }}
        </div>
        <el-button type="primary" @click="$route.path!=='/SendEmail'?$router.push('/SendEmail'):''">
          <i class="el-icon-plus"/>
          {{ menuCollapse ? null : '发送新邮箱' }}
        </el-button>
        <el-menu :router="true" :collapse="menuCollapse" style="border:none;">
          <el-menu-item index="RecipientControl">
            <i class="el-icon-user"></i>
            <span slot="title">收件人管理</span>
          </el-menu-item>
          <el-menu-item index="SenderControl">
            <i class="el-icon-menu"></i>
            <span slot="title">发件人管理</span>
          </el-menu-item>
          <el-menu-item index="MailTemplate">
            <i class="el-icon-document"></i>
            <span slot="title">邮件模板</span>
          </el-menu-item>
        </el-menu>
      </div>
      <el-drawer
          :visible.sync="drawerVis"
          direction="ltr"
          @close="menuCollapse=!menuCollapse"
          size="200"
          :with-header="false">
        <div id="drawer-aside-menu">
          <div class="logoBox" @click="$route.path!=='/'?$router.replace('/'):''">
            <img src="https://lxpstr-1307443497.cos.ap-nanjing.myqcloud.com/Logo.cf7c580b.svg" alt="无奇不邮Logo" title="无奇不邮Logo" width="30" height="30"/>
            {{ menuCollapse ? null : '无奇不邮' }}
          </div>
          <el-button type="primary" @click="$route.path!=='/SendEmail'?$router.push('/SendEmail'):''">
            <i class="el-icon-plus"/>
            {{ menuCollapse ? null : '发送新邮箱' }}
          </el-button>
          <el-menu :router="true" :collapse="menuCollapse" style="border:none;">
            <el-menu-item index="RecipientControl">
              <i class="el-icon-user"></i>
              <span slot="title">收件人管理</span>
            </el-menu-item>
            <el-menu-item index="SenderControl">
              <i class="el-icon-menu"></i>
              <span slot="title">发件人管理</span>
            </el-menu-item>
            <el-menu-item index="MailTemplate">
              <i class="el-icon-document"></i>
              <span slot="title">邮件模板</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-drawer>
      <!--右侧-->
      <el-container>
        <el-header height="auto"
                   style="padding: 10px 20px;display: flex;flex-flow: row nowrap;align-items: center;">
          <i :class="menuCollapse?'el-icon-s-unfold':'el-icon-s-fold'"
             @click="openMenu"
             style="font-size: 2rem;"
             id="collapse-btn"
          ></i>
          <el-tag style="margin-left: 10px;">当前服务器:{{ server.ip }}</el-tag>
          <div id="center-logo-box" @click="$route.path!=='/'?$router.replace('/'):''">
            <img src="https://lxpstr-1307443497.cos.ap-nanjing.myqcloud.com/Logo.cf7c580b.svg" alt="无奇不邮Logo" title="无奇不邮Logo" width="30" height="30"/>
            无奇不邮
          </div>
        </el-header>
        <el-main style="background: #fafafa;border-radius: 10px;height: 100vh">
          <!--显示依据:如果当前不是欢迎页,但拥有父组件并且路径为欢迎页则说明是欢迎页下的子页面-->
          <el-breadcrumb separator="/" style="padding: 10px 0"
                         v-if="pathCheck">
            <el-breadcrumb-item :to="'/'">主页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item>
          </el-breadcrumb>
          <el-divider v-if="pathCheck"></el-divider>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {mapGetters} from 'vuex';

export default {
  name: 'Home',
  data() {
    return {
      menuCollapse: true,
      drawerVis: false
    };
  },
  methods: {
    //打开菜单
    openMenu() {
      this.menuCollapse = !this.menuCollapse;
      let menu = document.getElementById('aside-menu-collapse');
      if (menu) {
        if (menu.offsetWidth === 0) {
          this.drawerVis = !this.drawerVis;
        }
      }
    }
  },
  computed: {
    ...mapGetters({loading: "getLoading", server: 'server/getCurrentServer', servers: 'server/getServers'}),
    //路径检查
    pathCheck() {
      return this.$route.path !== '/' && !(this.$route.path !== '/' && this.$route.matched[2] && this.$route.matched[2].parent.path === '/');
    }
  }
}
</script>
<style>
.logoBox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 30px;
  padding: 10px;
}

#aside-menu-collapse {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  padding: 10px;
  transition: width 300ms ease-in-out;
  width: 60px;
}

#aside-menu {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  padding: 10px;
  transition: width 300ms ease-in-out;
  width: 200px;
}

#drawer-aside-menu {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  padding: 10px;
}

#center-logo-box {
  transition: all 300ms ease-in-out;
  display: none;
}

@media screen and (max-width: 692px) {
  #aside-menu {
    width: 0;
    overflow: hidden;
    padding: 0;
  }

  #center-logo-box {
    display: flex;
    align-items: center;
    margin: 0 auto;
  }

  #aside-menu-collapse {
    width: 0;
    overflow: hidden;
    padding: 0;
  }
}
</style>
